<template>
    <div v-if="data.onlineInquiryReplys">
        <el-table :data="data.onlineInquiryReplys" style="width: 440px">
            <el-table-column label="是否可接">
                <el-table-column label="回复渠道">
                        <template slot-scope="scope">
                            <p v-if="scope.row.isAccept == 1">可接</p>
                            <p v-else>不可接</p>
                            <p v-if="scope.row.channelName">{{scope.row.channelName}}</p>
                            <p v-else>&nbsp;</p>
                        </template>
                </el-table-column>

            </el-table-column>
             <el-table-column label="建议卖价" width="74">
                <el-table-column label="对外卖价" width="74">
                    <template slot-scope="scope">
                        <p v-if="scope.row.suggestPrice">{{scope.row.suggestPrice}}</p>
                        <p v-else>&nbsp;</p>
                        <p v-if="data.isRunOff == 1">{{data.runOffInquiryPrice}} {{data.runOffCurrency}}</p>
                        <p v-else-if="scope.row.inquiryPrice">{{scope.row.inquiryPrice}} {{scope.row.currency}}</p>
                        <p v-else>&nbsp;</p>
                    </template>
                </el-table-column>
            </el-table-column>
            <el-table-column label="内部价" width="76">
                <el-table-column label="计费单位" width="76">
                    <template slot-scope="scope">
                        <p>{{scope.row.avgOnlineInquiryCost}}</p>
                        <p>{{scope.row.costUnit}}</p>
                    </template>
                </el-table-column>
            </el-table-column>
            <el-table-column label="有效日期" width="80">
                <template slot-scope="scope">
                    <p>{{scope.row.validityDate}}</p>
                    <p v-if="data.isValid == 0">无效</p>
                    <div v-else-if="data.isRunOff == 1">流失</div>
                    <p v-else-if="data.isFeasible == 0 || data.hasBeenRelation == 1 || data.isRunOff == 1"></p>
                    <p v-else-if="scope.row.remainDays < 0" style="color:red">逾期{{-scope.row.remainDays}}天</p>
                    <p v-else>剩余{{scope.row.remainDays}}天</p>
                </template>
            </el-table-column>
            <el-table-column label="关联运单" width="98">
                <template slot-scope="scope">
                    <p v-if="data.hasBeenRelation == 1">
                      <template v-if="scope.row.waybillNos">
                        <div v-for="(item,index) in scope.row.waybillNos.split(',')" :key="index">
                          <a :href="`/#/blank/waybill__alledit__main?waybillNo=${item}`" target="_blank" >{{item}}</a>
                        </div>
                      </template>
                    </p>
                    <p v-else-if="data.isFeasible == 0"></p>
                    <p v-else-if="data.isNeedAudit == 1">审核中</p>
                    <p v-else>
                        <el-button size="mini" @click="toRelevanceWaybillNo(scope.$index, scope.row)">关联运单</el-button>
                    </p>
                </template>
            </el-table-column>
        </el-table>
      <el-dialog title="关联运单" :visible.sync="dialogFormVisible">
        <el-form ref="replyRelateForm" :model="replyRelateForm" size="mini" label-width="80px" :rules="relevanceRules">
          <el-form-item label="运单号" prop="waybillNos">
            <el-input v-model="replyRelateForm.waybillNos" autocomplete="off" placeholder="关联多运单(海运整柜)请用,隔开"></el-input>
            <div>
              <el-tag type="info" size="mini">询价单关联多运单需要渠道审核才能生效,运单创建时间>有效日期也需要审核</el-tag>
            </div>
          </el-form-item>
          <el-form-item label="币种">
            <el-select v-model="replyRelateForm.currency">
              <el-option
                v-for="value in currencyMap"
                :key="value"
                :value="value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="对外卖价" prop="inquiryPrice">
            <el-input v-model="replyRelateForm.inquiryPrice" autocomplete="off" :placeholder="costUnit"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="mini" @click="dialogFormVisible = false">取 消</el-button>
          <el-button size="mini" type="primary" @click="relevanceWaybillNo">确 定</el-button>
        </div>
      </el-dialog>


    </div>
    <div v-else-if="data.isRunOff == 1">
        流失,对外卖价：{{data.runOffInquiryPrice}} {{data.runOffCurrency}}
    </div>
</template>
<script>
  import { ajax } from "@/store/yg/common/utils";
  import { m } from "@/store/yg/common/local";
export default {
    props: ["data"],
    data(){
        return {
          dialogFormVisible: false,
          costUnit: null,
          currencyMap: [],
          replyRelateForm: {
            onlineInquiryReplyId: null,
            waybillNos: null,
            inquiryPrice: null,
            currency: null
          },
          relevanceRules:{
            waybillNos: [
              {
                required: true,
                message: "运单号不能为空"
              }
            ],
            inquiryPrice: [
              {
                required: true,
                message: "对外报价不能为空"
              },
              {
                pattern: /^[1-9]+\d*(\.\d*)?$|^0?\.\d*[1-9]\d*|^0+[1-9]\d*(\.\d*)?$/,
                message: "对外卖价只能填正实数"
              }
            ]
          }
        }
    },
  created() {
    this.initCurrency();
  },
    methods: {
      async initCurrency(){
        this.currencyMap = this.$store.state.main.entry.sources["currencySource"];
        // console.log(this.$store.state);
        // const d = JSON.parse(localStorage.getItem('main_waybill__onlineinquiry__list'));
        // this.currencyMap = d.sources.currencySource;
      },
      toRelevanceWaybillNo(index, row) {
           this.dialogFormVisible = true;
           this.costUnit = row.costUnit;
           this.replyRelateForm.onlineInquiryReplyId = row.id;
           this.replyRelateForm.waybillNos = row.waybillNos;
           this.replyRelateForm.inquiryPrice = row.inquiryPrice;
           this.replyRelateForm.currency = row.currency;
           if(!this.replyRelateForm.currency){
             this.replyRelateForm.currency = 'RMB';
           }
       },
       relevanceWaybillNo(){
         this.$refs["replyRelateForm"].validate(valid => {
           if (!valid) return;
           const params = this.replyRelateForm;
           this.saverelevanceWaybillNo(params);
         });
       },
      async saverelevanceWaybillNo(params){
         const data = await ajax("relevanceWaybillNo", params);
        if (data.code == 200) {
          this.$message.success("操作成功"+data.data2);
          this.dialogFormVisible = false;
          await this.$store.dispatch('loadPageData', this.$route.params.uri);
        }else if (data.code == 300) {
          this.dialogFormVisible = false;
          this.$alert(m(data.message), {
            confirmButtonText: '确定',
            callback: action => {
              this.$store.dispatch('loadPageData', this.$route.params.uri);
            }
          })
        }else {
          this.$message.error(m(data.message));
        }
      }
    }
}
</script>
<style scoped>
.el-table{
    font-size: 12px;
}
</style>
